<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Dialogs in Tk</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, dialogs, Tcl/Tk, Tcl, Linux, programming, learn Tcl/Tk">
<meta name="description" content="This part of the Tcl/Tk tutorial covers dialogs in Tk.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Dialogs in Tk</h1>

<p>
In this part of the Tcl/Tk tutorial, we will work with dialogs. 
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

<p>
Dialog windows or dialogs are an indispensable part of most modern GUI applications. 
A dialog is defined as a conversation between two or more persons. In a computer 
application a dialog is a window which is used to "talk" to the application. 
A dialog is used to input data, modify data, change the application settings etc. 
Dialogs are important means of communication between a user and a computer program. 
</p>


<h2>Message boxes</h2>

<p>
Message boxes are convenient dialogs that provide messages to the user of the application. 
The message consists of text and image data. Message boxes in Tk are created with the 
<code>tk_messageBox</code> command.
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this program, we show various
# message boxes.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


frame .fr
pack .fr 

ttk::button .fr.erButton -text Error -command onError
grid .fr.erButton 
ttk::button .fr.wButton -text Warning -command onWarn
grid .fr.wButton -row 1 -column 0 
ttk::button .fr.queButton -text Question -command onQuest
grid .fr.queButton -row 0 -column 1 -sticky we -columnspan 6
ttk::button .fr.infButton -text Information -command onInfo
grid .fr.infButton -row 1 -column 1


proc onError {} {
    tk_messageBox -type ok -icon error -title Error \
    -message "Could not open file"
}

proc onWarn {} {
    tk_messageBox -type ok -icon warning -title Warning \
    -message "Deprecated function call"
}

proc onQuest {} {
    tk_messageBox -type ok -icon question -title Question \
    -message "Are you sure to quit?"
}

proc onInfo {} {
    tk_messageBox -type ok -icon info -title Information \
    -message "Download completed"
}


wm title . "message boxes" 
wm geometry . 300x150+300+300
</pre>

<p>
We use the grid manager to set up a grid of
four buttons. Each of the buttons shows a different message box. 
</p>


<pre class="explanation">
ttk::button .fr.erButton -text Error -command onError
grid .fr.erButton 
</pre>

<p>
We create an error button, which calls the onError procedure. Inside the
method, we show the error message dialog. The button is placed into the 
first cell of the grid. Widgets inside the ttk namespace are themed. 
The <code>button</code> and <code>ttk::button</code> are the same buttons
in terms of functionality. The difference is that we can apply themes on
the latter. 
</p>

<pre class="explanation">
proc onError {} {
    tk_messageBox -type ok -icon error -title Error \
    -message "Could not open file"
}
</pre>

<p>
In case we pressed the error button, we show the error dialog. 
We use the <code>tk_messageBox</code> command to create the message box.
The -type option specifies which buttons are shown in the dialog.
In our case it is a single OK button. The -icon specifies the type of the
icon to be shown. The -title provides the title of the dialog and the
-message its message. 
</p>

<img src="/img/gui/tcltk/errordlg.png" alt="Warning message dialog">
<div class="figure">Figure: Warning message dialog</div>


<h2>Color chooser</h2>

<p>
The color chooser is a dialog for selecting a color.
We use the <code>tk_chooseColor</code> command to display
the dialog. 
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this script, we use tk_chooseColor
# dialog to change the color of the text.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


label .l -text ZetCode
place .l -x 20 -y 90

button .b -text "Choose a color..." \
        -command "onSelect .l" 
place .b -x 20 -y 30

wm title . "color dialog" 
wm geometry . 350x200+300+300


proc onSelect {widget} {
    set col \
        [tk_chooseColor -title "Choose a color" -parent .]
    $widget configure -foreground $col
}
</pre>


<p>
We have a button and a label. Clicking on the button we show a color chooser
dialog. We will change the color of the label text by selecting a color from 
the dialog.
</p>

<pre class="explanation">
label .l -text ZetCode
place .l -x 20 -y 90
</pre>

<p>
We create a <code>label</code> widget and place it on the window. 
</p>

<pre class="explanation">
button .b -text "Choose a color..." \
        -command "onSelect .l" 
place .b -x 20 -y 30
</pre>

<p>
We create a <code>button</code> widget and place it on 
the window. We pass the widget path of the label to the
onSelect procedure, which shows the dialog and changes 
the color of the label.
</p>

<pre class="explanation">
proc onSelect {widget} {
    set col \
        [tk_chooseColor -title "Choose a color" -parent .]
    $widget configure -foreground $col
}
</pre>

<p>
Inside the onSelect procedure, we show the dialog and change the label
color. First we display the dialog and store the chosen color value
in the col variable. Later we use the <code>configure</code> command
to change the foreground of the label. The command is executed on the
widget's path name. The label's path name was passed to the procedure. 
</p>


<img src="/img/gui/tcltk/colorchooser.png" alt="Color chooser">
<div class="figure">Figure: Color chooser</div>



<h2>File dialog</h2>

<p>
<code>tk_getOpenFile</code> dialog allows a user to select a file from
the filesystem. 
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this program, we use the
# tk_getOpenFile dialog to select a file from
# a filesystem.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


set types {
    {"All Source Files"     {.tcl .tk } }
    {"Image Files"          {.gif .png .jpg} }
    {"All files"            *}
}

proc onSelect { label } {
    global types   
    set file [tk_getOpenFile -filetypes $types -parent .]
    $label configure -text $file
}

label .l -text "..."
place .l -x 20 -y 90

button .b -text "Select a file" \
        -command "onSelect .l"
place .b -x 20 -y 30


wm title . "openfile" 
wm geometry . 350x200+300+300
</pre>

<p>
In our code example, we use the <code>tk_getOpenFile</code> dialog to 
select a file and display its name in a <code>label</code> widget.
</p>


<pre class="explanation">
set types {
    {"All Source Files"     {.tcl .tk } }
    {"Image Files"          {.gif .png .jpg} }
    {"All files"            *}
}
</pre>

<p>
These are file filters. These filters can be used to show only
specific files in the dialog. 
</p>


<pre class="explanation">
proc onSelect { label } {
    global types   
    set file [tk_getOpenFile -filetypes $types -parent .]
    $label configure -text $file
}
</pre>

<p>
We show the dialog with the <code>tk_getOpenFile</code> command.
We apply the file filters using the -filetypes option. The
selected file name is stored in the file variable. The
<code>configure</code> command is used to change the text of the
label. 
</p>


<img src="/img/gui/tcltk/filedlg.png" alt="tk_getOpenFile">
<div class="figure">Figure: tk_getOpenFile</div>



<p>
In this part of the Tcl/Tk tutorial, we worked with dialog windows. 
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>



<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified March 12, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

